<script setup>
import { ref, reactive, watch, unref } from "vue";
import useSpecsStore from "../../store/specsStore";
import { ElMessageBox, ElMessage } from "element-plus";

const specsStore = useSpecsStore();

const editId = ref("");
// 添加属性的数组
const attrArr = reactive({
  list: [""],
});
const specsForm = reactive({
  specsname: "",
  attrs: "",
  status: 1,
});
const rules = reactive({
  specsname: { required: true, message: "请输入规格名称", trigger: "blur" },
  attrs: { required: true, message: "请输入规格属性", trigger: "blur" },
  status: { required: true, message: "请选择规格状态", trigger: "blur" },
});
const formRef = ref(null);

// 导出父组件需要用的属性与方法
defineExpose({
  editId,
  specsForm,
  attrArr,
});

// 增加一个属性
function addAttr() {
  if (attrArr.list.length >= 5) {
    ElMessage({
      type: "warning",
      message: "规则属性最多添加5个",
    });
    return;
  }
  attrArr.list.push("");
}
// 删除一个属性
function delAttr(index) {
  attrArr.list.splice(index, 1);
}

// 重置表单
const resetForm = () => {
  editId.value = "";
  attrArr.list = [""];
  specsForm.specsname = "";
  specsForm.attrs = "";
  specsForm.status = 1;
  // 关闭对话框
  specsStore.closeDialog();
};
// 提交表单
const submitForm = () => {
  // console.log(specsForm,'specsForm------')
  let form = unref(formRef);
  form.validate((valid) => {
    if (valid) {
      specsForm.attrs = attrArr.list.join(",");
      // console.log('提交规格数据', specsForm)
      if (editId.value) {
        // 编辑
        // console.log(editId,'编辑-----')
        specsStore.editSpecsAction({ ...specsForm, id: editId.value });
      } else {
        // console.log('新增----')
        specsStore.addSpecsAction(specsForm);
      }
      // 重置表单
      resetForm();
    } else {
      // console.log('error submit!')
      return false;
    }
  });
};
const handleClose = (done) => {
  ElMessageBox.confirm("你确定要关闭吗？")
    .then(() => {
      done();
      resetForm();
    })
    .catch(() => {
      // catch error
    });
};
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    :title="editId ? '编辑规格' : '新增规格'"
    v-model="specsStore.dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      :model="specsForm"
      :rules="rules"
      ref="formRef"
      label-width="100px"
    >
      <el-form-item label="规格名称" prop="spcesname">
        <el-input
          v-model="specsForm.specsname"
          placeholder="请输入规格名称"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="管理商品" class="demo-attrs">
        <el-select value-key="" placeholder="" clearable filterable @change="">
          <!-- <el-option v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option> -->
        </el-select>
      </el-form-item>

      <el-form-item label="规格状态" prop="status">
        <el-radio-group v-model="specsForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">{{
          editId ? "编辑规格" : "新增规格"
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
